<template>
	<view class="add-container">
        <button type="primary" plain="true" shape="circle" class="btn" @click="editAddress({})">添加新地址</button>
        <template v-if="addsress.length > 0">
            <view class="oldaddress" v-for="(item,index) in addsress" :key="index">
                <view class="ads-flex-between">
                    <view>{{item.realName}}</view>
                    <tel>{{item.mobile}}</tel>
                </view>
                <view class="building">
                    {{item.provincename}} {{item.cityname}} {{item.countyname}} {{item.address}}
                </view>
                <view class="editing-body">
                    <view style="display:flex;align-items: center;" @click="changeDef(item)">
                        <uv-icon size="22" :color="item.defaultAddress == 'Y'?'#000':'#999'" :name="item.defaultAddress == 'Y'?'checkmark-circle-fill':'checkmark-circle'"></uv-icon>
                        <text style="margin-left:12rpx;" :style="{color:item.defaultAddress == 'Y'?'#000':'#999'}">{{item.defaultAddress == 'Y'?'默认地址':'设置为默认' }}</text>
                    </view>
                    <view class="editing">
                        <uv-icon size="22" name="edit-pen" @click="editAddress(item)"></uv-icon>
                        <uv-icon size="22" name="trash" style="margin-left:32px;" @click="openMode(item)"></uv-icon>
                    </view>
                </view>
            </view>
        </template>
		<view v-else style="margin-top:35vh">
			<uv-empty mode="address" icon="https://wx.sijiyoufu.com/static/imgs/project/couponEmpty.png"></uv-empty>
		</view>
        <uv-modal ref="modal" title="删除提醒" 
            :content='`确认删除地址:“${row.address}”`' 
            :showCancelButton="true"
            :closeOnClickOverlay='false'
            :showConfirmButton="true"
            @confirm="deleteAddres"></uv-modal>
	</view>
</template>

<script setup lang="ts">
import { ref , computed , getCurrentInstance} from 'vue'
import { useUCenterStore } from '@/stores/uCenter'
import Tabbar from '@/components/tabbar'
import { onShow , onLoad } from "@dcloudio/uni-app"
const store = useUCenterStore()
import { getAddressList , delAddress , saveAddress} from '@/api/product'

const modal = ref()
const row = ref<any>({})
const openMode = (item : any) => {
    row.value = item
    modal.value.open();
}
const deleteAddres = () => {
    delAddress({addressId : row.value.id}).then(res => {
        if(res.success){
            uni.showToast({icon:'success',title:'删除成功'})
            initpage()
            modal.value.close();
        }else{
            uni.showToast({icon:'none',title:res.msg})
        }
    })
}

const changeDef = (item : any) => {
    saveAddress({
        address : item.address,
        citycode : item.citycode,
        countycode : item.countycode,
        mobile : item.mobile,
        defaultAddress:'Y',
        provincecode : item.provincecode,
        realName : item.realName,
        addressId: item.id
    }).then(res => {
        if(res.success){
            uni.showToast({icon:'success',title:'设置成功'})
            initpage()
            if(isChange.value)uni.navigateBack()
        }else uni.showToast({icon:'none',title:res.msg})
    })
}

const editAddress = (item : any) => {
    row.value = item
    uni.navigateTo({ url: `/pages/address/editAddress?id=${item.id}` })
}
const addsress = ref<any>([])

let toadd = () => {
    uni.navigateTo({
        url: '/pages/address/address',
        fail(error) {
            console.log(error)
        }
    })
}

const initpage = () => {
    getAddressList({page_no:1,per:100}).then(res => {
        addsress.value = res.data.records
    })
}
const isChange = ref<any>(false)
onLoad((options : any) => {
    if(options.change)isChange.value = true
})

onShow(async () => {
    initpage()
})
</script>

<style lang="scss">
.add-container {
    width: 100vw;
    height: 100vh;
}
.oldaddress {
    padding: 5% 5% 2%;
    box-sizing: border-box;
    margin: 3%;
    border-radius: 9px;
    background-color: #fff;
}
.ads-flex-between {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
}
.ads-flex-between tel{
    color:#999;
    margin-left:12px;
}
.building {
    margin-top: 6px;
    font-size: 14px;
    color: black;
    padding-bottom: 16px;
    border-bottom: 0.5px solid rgba(0,0,0,.1);
}
.editing-body{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size:14px;
    color:#999;
}
.editing {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0;
    font-size: 14px;
}

.editing .uvicon-trash{margin-left:22px;}

.add-container .btn {
    width: 94%;
    margin-top:32rpx;
    color:$uni-color-primary !important;
    border-color:$uni-color-primary !important;
}
</style>